<template>
    <div class="home">
        <home-header></home-header>
        <home-swiper :swiperList="swiperList"></home-swiper>
        <home-icons :iconList="iconList"></home-icons>
        <home-location></home-location>
        <home-activity></home-activity>        
        <home-hot :hotList="hotList"></home-hot>
        <home-like :likeList="likeList"></home-like>                        
        <home-vacation :vacationList="vacationList"></home-vacation>                                
    </div>
</template>
<script>
import {mapState} from 'vuex'
    import HomeHeader from './pages/Header'
    import HomeSwiper from './pages/Swiper'    
    import HomeIcons from './pages/Icons'      
    import HomeLocation from './pages/Location'                  
    import HomeActivity from './pages/Activity'            
    import HomeHot from './pages/Hot'            
    import HomeLike from './pages/Like'                
    import homeVacation from './pages/Vacation'                    
    export default{
        components:{
            HomeHeader,
            HomeSwiper,
            HomeIcons,
            HomeLocation,
            HomeActivity,
            HomeHot,
            HomeLike,
            homeVacation
        },
        data(){
            return{
                swiperList:[],
                iconList:[],
                hotList:[],
                likeList:[],
                vacationList:[],
                changeCity:""
            }
        },
        computed:{
            ...mapState(['city'])
        },
        methods:{
            getHttp(){
                this.$http.get("/api/dataHome.json")
                .then(res=>{
                    const data=res.data.data
                    data.forEach((item,index)=>{
                        if(item.city==this.city){
                            // console.log(item)
                            this.swiperList=item.swiperList
                            this.iconList=item.iconList                    
                            this.hotList=item.hotList
                            this.likeList=item.likeList
                            this.vacationList=item.vacationList
                        }
                    }) 
                })
            }
        },
        mounted(){
            this.changeCity=this.city
           this.getHttp()
        },
        activated(){
            // console.log(this.city,this.changeCity)
            if(this.city!=this.changeCity){
                this.getHttp();
                this.changeCity=this.city                
            }
        }
    }
</script>
<style scoped>
.home{
    background-color: #f5f5f5;
}
</style>

